<!--Content Services, Process Services AND CSRF TOGGLE-->
<div class="settings">
    <p class="toggle">
        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input" (click)="toggleECM()">
            <span class="mdl-switch__label">Content Services</span>
        </label>
    </p>
    <p class="toggle">
        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input" (click)="toggleBPM()">
            <span class="mdl-switch__label">Process Services</span>
        </label>
    </p>
    <p class="toggle">
        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
            <span class="mdl-switch__label">CSRF</span>
        </label>
    </p>
</div>

<!--SETTING BUTTON-->
<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
        <i class="material-icons">settings</i>
    </button>
</a>

<!--LOGIN-->
<alfresco-login #alfrescologin
                [providers]="providers"
                [fieldsValidation]="customValidation"
                [disableCsrf]="disableCsrf"
                [backgroundImageUrl]="'/public/img/background.jpg'"
                (executeSubmit)="validateForm($event)"
                (onSuccess)="onLogin($event)"
                (onError)="onError($event)">
    <div class="mobile-settings">
        <p>
            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
                       (click)="toggleECM()">
                <span class="mdl-switch__label">Content Services</span>
            </label>
        </p>
        <p>
            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
                       (click)="toggleBPM()">
                <span class="mdl-switch__label">Process Services</span>
            </label>
        </p>
        <p>
            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
                <span class="mdl-switch__label">CSRF</span>
            </label>
        </p>
    </div>
</alfresco-login>
